<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/shop.css">
    <title>Title</title>
</head>
<body>
<div th:block th:include="~{common/top}"></div>


<style>
    .display {
        max-height: 800px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    table {
        width: 473px;
        line-height: 30px;

    }

    #MyOrdersLink {
        width: 120px;
        height: 40px;
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 22px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        position: absolute;
        top: 170px;
        left: 150px;
        padding: 5px;
        cursor: pointer;
    }

    #MyOrdersLink button {
        width: 120px;
        height: 40px;
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 22px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        display: block;
        margin: 0 auto;
        padding: 5px;
        cursor: pointer;
    }

    #MyOrdersLink button:hover {
        color: #ff7516;
    }

</style>

<div id="MyOrdersLink">
    <a th:href="@{orderList(username=${session.loginUser.username})}">
        <button><span>My Orders</span></button>
    </a>
</div>

<div class="display">

    <div id="Catalog">

        <table>
            <tr>
                <th colspan="2">Order <th:block th:text="${session.order.getOrderId()}"></th:block>
                    <span th:text="${#dates.format(session.order.getOrderDate(), 'yyyy/MM/dd hh:mm:ss')}"></span>
                </th>
            </tr>
            <tr>
                <th colspan="2">Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td th:text="${session.order.getCardType()}"></td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td th:text="${session.order.getCreditCard()} + ' * Fake number!'"></td>
            </tr>
            <tr>
                <td>Expiry Date (MM/YYYY):</td>
                <td th:text="${session.order.getExpiryDate()}"></td>
            </tr>
            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${session.order.getBillToFirstName()}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${session.order.getBillToLastName()}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${session.order.getBillAddress1()}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${session.order.getBillAddress2()}"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${session.order.getBillCity()}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${session.order.getBillState()}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${session.order.getBillZip()}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${session.order.getBillCountry()}"></td>
            </tr>

        </table>
    </div>

    <div id="Catalog2" style="max-height: 536px;min-height: 504px;overflow-y: auto;">
        <table>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${session.order.getShipToFirstName()}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${session.order.getShipToLastName()}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${session.order.getShipAddress1()}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${session.order.getShipAddress2()}"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${session.order.getShipCity()}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${session.order.getShipState()}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${session.order.getShipZip()}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${session.order.getShipCountry()}"></td>
            </tr>
            <tr>
                <td>Courier:</td>
                <td th:text="${session.order.getCourier()}"></td>
            </tr>
            <tr>
                <td colspan="2">Status:
                    <th:block th:text="${session.order.getStatus()}"></th:block>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <th>Item ID</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total Cost</th>
                        </tr>
                        <tr th:each="item,itemStat : ${session.Items}">
                            <td>
                                <a th:href="@{/productForm(productId=${item.getProductId()})}" th:text="${item.getItemId()}"></a>
                            </td>
                            <td>
                                <div th:if="${item != null}">
                                    <span th:text="${item.getAttribute1()}"></span>
                                    <span th:text="${item.getAttribute2()}"></span>
                                    <span th:text="${item.getAttribute3()}"></span>
                                    <span th:text="${item.getAttribute4()}"></span>
                                    <span th:text="${item.getAttribute5()}"></span>
                                    <span th:utext="${item.getProductName()}"></span>
                                </div>
                                <div th:if="${item == null}">
                                    <i>{description unavailable}</i>
                                </div>
                            </td>
                            <td th:text="${session.lineItems.get(itemStat.index).getQuantity()}"></td>
                            <td>
                                <span th:text="${session.lineItems.get(itemStat.index).getUnitPrice()}"></span>
                            </td>
                            <td>
                                <span th:text="${session.lineItems.get(itemStat.index).getTotal()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="5">Total:
                                <span th:text="${session.order.totalPrice}"></span>
                            </th>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </div>
</div>

</body>
</html>